<template>
  <div class="divBox">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <div class="container">
          <el-form inline size="small" :model="from" ref="from" :label-position="labelPosition" label-width="100px">
            <el-row>
              <el-col :xs="16" :sm="16" :md="16" :lg="16" :xl="16">
                <el-form-item label="字典名称：">
                  <el-select v-model="from.dictType" placeholder="请选择字典名称" clearable class="selWidth">
                    <el-option v-for="item in options" :key="item.dictId" :label="item.dictName" :value="item.dictType">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="字典标签：">
                  <el-input v-model="from.dictLabel" placeholder="请输入字典标签" clearable class="selWidth" />
                </el-form-item>
                <el-form-item label="状态：">
                  <el-select v-model="from.status" placeholder="数据状态" class="selWidth" clearable>
                    <el-option :value="1" label="正常"></el-option>
                    <el-option :value="2" label="停用"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :xs="4" :sm="4" :md="4" :lg="4" :xl="4" class="text-right from">
                <el-form-item>
                  <el-button class="mr10" size="small" type="primary" @click="search()">搜索</el-button>
                  <el-button class="mr10" size="small" @click="reset()">重置</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div class="btn_bt">
          <el-button class="mr10" size="small" type="primary" @click="add()">新增</el-button>
          <el-button class="mr10" size="small" type="danger" @click="allDel()">删除</el-button>
          <el-button class="mr10" size="small" @click="exportTable()">导出表格</el-button>
          <el-button class="mr10" size="small" type="warning" @click="returnTo()">关闭</el-button>
        </div>
      </div>
      <el-table border ref="table" v-loading="loading" :data="tableData.data" style="width: 100%" size="mini"
        @selection-change="onSelectTab" highlight-current-row>
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="dictCode" label="字典编码" min-width="80" />
        <el-table-column prop="dictLabel" label="字典标签" min-width="80">
          <template slot-scope="scope">
            <el-button v-if="scope.row.listClass == 'default'" type="default"
              size="mini">{{scope.row.dictLabel}}</el-button>
            <el-button v-if="scope.row.listClass == 'primary'" type="primary"
              size="mini">{{scope.row.dictLabel}}</el-button>
            <el-button v-if="scope.row.listClass == 'success'" type="success"
              size="mini">{{scope.row.dictLabel}}</el-button>
            <el-button v-if="scope.row.listClass == 'info'" type="info" size="mini">{{scope.row.dictLabel}}</el-button>
            <el-button v-if="scope.row.listClass == 'warning'" type="warning"
              size="mini">{{scope.row.dictLabel}}</el-button>
            <el-button v-if="scope.row.listClass == 'danger'" type="danger"
              size="mini">{{scope.row.dictLabel}}</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="dictValue" label="字典键值" min-width="80" />
        <el-table-column prop="dictSort" label="字典排序" min-width="80" />
        <el-table-column prop="status" label="状态" min-width="80">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" v-if="scope.row.status == 1">正常</el-button>
            <el-button type="info" size="mini" v-if="scope.row.status == 2">停用</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注" min-width="100" />
        <el-table-column prop="createTime" label="创建时间" min-width="150" />
        <el-table-column label="操作" min-width="130" fixed="right" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button type="text" size="small" @click="handleDel(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination :page-sizes="[15, 30, 45, 60]" :page-size="from.limit" :current-page="from.page"
          layout="total, sizes, prev, pager, next, jumper" :total="tableData.total" @size-change="handleSizeChange"
          @current-change="pageChange" />
      </div>
    </el-card>

    <el-dialog :title="ruleForm.dictCode?'编辑字典数据':'新增字典数据'" :visible.sync="dialogVisible" width="40%"
       :close-on-click-modal="false" :close-on-press-escape="false">
      <el-form :rules="rules" ref="ruleForm" :model="ruleForm" label-width="120px">
        <el-form-item label="字典类型：" prop="dictType">
          <el-input v-model="ruleForm.dictType" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="数据标签：" prop="dictLabel">
          <el-input v-model="ruleForm.dictLabel"></el-input>
        </el-form-item>
        <el-form-item label="数据键值：" prop="dictValue">
          <el-input v-model="ruleForm.dictValue"></el-input>
        </el-form-item>
        <el-form-item label="样式属性：" prop="cssClass">
          <el-input v-model="ruleForm.cssClass"></el-input>
        </el-form-item>
        <el-form-item label="显示排序：" prop="dictSort">
          <el-input-number v-model="ruleForm.dictSort" controls-position="right" :step="1" :min="-1000"
            :max="1000"></el-input-number>
        </el-form-item>
        <el-form-item label="回显样式：" prop="listClass">
          <el-select v-model="ruleForm.listClass">
            <el-option v-for="item in listClassOptions" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态：">
          <el-radio-group v-model="ruleForm.status">
            <el-radio :label="1">正常</el-radio>
            <el-radio :label="2">停用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备注：">
          <el-input type="textarea" v-model="ruleForm.remark"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close()">取 消</el-button>
        <el-button type="primary" @click="submit()">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
  import {
    sysDictTypeOptionselect,
    sysDictDataList,
    sysDictDataAdd,
    sysDictDataDel,
    sysDictDataDetail,
    sysDictDataEdit,
    sysDictDataExport
  } from '@/api/dict'
  export default {
    name: 'dict-data',
    data() {
      return {
        labelPosition: 'right',
        options: [],
        from: {
          dictType: '',
          dictLabel: '',
          status: null,
          page: 1,
          limit: 15,
        },
        loading: false,
        tableData: {
          data: [],
          total: 0
        },
        selection: [],
        dialogVisible: false,
        ruleForm: {
          dictCode: '',
          dictType: '',
          dictLabel: '',
          dictValue: '',
          cssClass: '',
          dictSort: 0,
          listClass: 'default',
          status: 1,
          remark: '',
        },
        listClassOptions: [{
          value: 'default',
          label: '默认(default)'
        }, {
          value: 'primary',
          label: '主要(primary)'
        }, {
          value: 'success',
          label: '成功(success)'
        }, {
          value: 'info',
          label: '信息(info)'
        }, {
          value: 'warning',
          label: '警告(warning)'
        }, {
          value: 'danger',
          label: '危险(danger)'
        }],
        rules: {
          dictLabel: [{
            required: true,
            message: '请填写数据标签',
            trigger: 'blur'
          }],
          dictValue: [{
            required: true,
            message: '请填写数据键值',
            trigger: 'blur'
          }],
          dictSort: [{
            required: true,
            message: '请填写显示排序',
            trigger: 'blur'
          }],
        }
      }
    },
    mounted() {
      if (this.$route.params.dictType) {
        this.from.dictType = this.$route.params.dictType
      }
      sysDictTypeOptionselect().then(res => {
        console.log('获取字典选择框列表', res)
        this.options = res
      }).catch(err => {
        console.log('获取字典选择框列表', err)
      })
      this.getlist()
    },
    methods: {
      search() {
        console.log(this.from)
        this.from.page = 1
        this.from.limit = 15
        this.getlist()
      },
      reset() {
        this.from.dictLabel = ''
        this.from.status = null
        this.from.page = 1
        this.from.limit = 15
        this.getlist()
      },
      getlist() {
        console.log(this.from.status)
        if (this.from.status == 1 || this.from.status == 2) {
          let data = {
            dictType: this.from.dictType,
            dictLabel: this.from.dictLabel,
            status: this.from.status,
            page: this.from.page,
            limit: this.from.limit,
          }
          sysDictDataList(data).then(res => {
            console.log(res)
            this.tableData.data = res.list
            this.tableData.total = res.total
            this.loading = false
          }).catch(err => {
            console.log(err)
            this.loading = false
          })
        } else {
          let data = {
            dictType: this.from.dictType,
            dictLabel: this.from.dictLabel,
            page: this.from.page,
            limit: this.from.limit,
          }
          this.loading = true
          sysDictDataList(data).then(res => {
            console.log(res)
            this.tableData.data = res.list
            this.tableData.total = res.total
            this.loading = false
          }).catch(err => {
            console.log(err)
            this.loading = false
          })
        }
      },
      allDel() {
        if (this.selection.length == 0) {
          return this.$message.error('至少选择一项')
        }
        console.log(this.selection)
        this.$confirm('确认删除？')
          .then(_ => {
            sysDictDataDel(this.selection).then(res => {
              console.log(res)
              this.$message.success('删除成功')
              this.getlist()
            }).catch(err => {
              console.log(err)
              this.$message.error(err)
            })
          })
          .catch(_ => {});
      },
      exportTable() {
        sysDictDataExport(this.from).then(res => {
          console.log('导出表格', res)
          window.open(res.filename);
        }).catch(err => {
          console.log(err)
          this.$message.error(err)
        })
      },
      returnTo() {
        this.$router.back();
      },
      // 选择
      onSelectTab(selection) {
        this.selection = []
        selection.forEach(item => {
          this.selection.push(item.dictCode)
        })
        console.log(this.selection)
      },
      add() {
        this.ruleForm = {
          dictCode: '',
          dictType: this.from.dictType,
          dictLabel: '',
          dictValue: '',
          cssClass: '',
          dictSort: 0,
          listClass: 'default',
          status: 1,
          remark: '',
        }
        this.dialogVisible = true
      },
      close() {
        this.ruleForm = {
          dictCode: '',
          dictType: '',
          dictLabel: '',
          dictValue: '',
          cssClass: '',
          dictSort: 0,
          listClass: 'default',
          status: 1,
          remark: '',
        }
        this.dialogVisible = false
      },
      submit() {
        this.$refs['ruleForm'].validate((valid) => {
          if (valid) {
            if (this.ruleForm.dictCode) {
              console.log('编辑', this.ruleForm)
              sysDictDataEdit(this.ruleForm).then(res => {
                console.log(res)
                this.close()
                this.$message.success('编辑成功')
                this.getlist()
              }).catch(err => {
                console.log(err)
                this.$message.error(err)
              })
            } else {
              console.log('新增', this.ruleForm)
              let data = {
                dictType: this.ruleForm.dictType,
                dictLabel: this.ruleForm.dictLabel,
                dictValue: this.ruleForm.dictValue,
                cssClass: this.ruleForm.cssClass,
                dictSort: this.ruleForm.dictSort,
                listClass: this.ruleForm.listClass,
                status: this.ruleForm.status,
                remark: this.ruleForm.remark,
              }
              sysDictDataAdd(data).then(res => {
                console.log(res)
                this.close()
                this.$message.success('新增成功')
                this.getlist()
              }).catch(err => {
                console.log(err)
                this.$message.error(err)
              })
            }
          } else {
            this.$message.error('请填写完整信息')
          }
        });
      },
      handleEdit(row) {
        console.log('编辑', row)
        sysDictDataDetail(row.dictCode).then(res => {
          console.log('详情', res)
          this.ruleForm = {
            dictCode: res.dictCode,
            dictType: res.dictType,
            dictLabel: res.dictLabel,
            dictValue: res.dictValue,
            cssClass: res.cssClass,
            dictSort: res.dictSort,
            listClass: res.listClass,
            status: Number(res.status),
            remark: res.remark,
          }
          this.dialogVisible = true
        }).catch(err => {
          console.log(err)
          this.$message.error(err)
        })
      },
      handleDel(row) {
        this.$confirm('确认删除？')
          .then(_ => {
            console.log('删除', row)
            sysDictDataDel(row.dictCode).then(res => {
              console.log(res)
              this.$message.success('删除成功')
              this.getlist()
            }).catch(err => {
              console.log(err)
              this.$message.error(err)
            })
          })
          .catch(_ => {});
      },
      pageChange(page) {
        this.from.page = page
        this.getlist()
      },
      handleSizeChange(val) {
        this.from.limit = val
        this.getlist()
      }
    }
  }
</script>

<style scoped lang="scss">
  .btn_bt {
    border-top: 1px dashed #ccc;
    padding-top: 20px;
  }
</style>
